<!DOCTYPE html>

<html class="loading" lang="en" data-textdirection="ltr">



<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />

  <meta name="author" content="PIXINVENT" />

  <title>749便利店管理系統</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css" />

  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css" />

  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css" />

  <style>
    .content-header {
      display: flex;
      justify-content: space-between;
    }

    .card-deck {
      display: flex;
      flex-wrap: wrap;
    }

    .cart-button-container {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
    }

    .cart-button-container button {
      display: inline-block;
    }
    /* 商品卡片容器，每行显示3个商品 */
    #cards {
      display: flex;
      flex-wrap: wrap;
      margin: -10px; /* 补偿内边距 */
    }

    /* 单个商品卡片样式 */
    #cards .card {
      flex: 0 0 calc(33.333% - 20px); /* 每行3个，减去左右margin */
      margin: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* 商品卡片悬停效果 */
    #cards .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* 商品图片容器 */
    .image-container {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: #f8f9fa;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    /* 商品图片样式 - 等比例缩放不变形 */
    .card-img-top {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    /* 卡片内容区域 */
    .card-body {
      padding: 15px;
    }

    /* 卡片标题 */
    .card-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 卡片文本 */
    .card-text {
      font-size: 14px;
      margin-bottom: 5px;
      color: #666;
    }

    /* 价格强调样式 */
    .text-primary {
      color: #007bff;
      font-weight: bold;
    }

    /* 卡片底部 */
    .card-footer {
      padding: 15px;
      background-color: #f8f9fa;
      border-top: 1px solid #e9ecef;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      #cards .card {
        flex: 0 0 calc(50% - 20px); /* 中等屏幕每行2个 */
      }
    }

    @media (max-width: 768px) {
      #cards .card {
        flex: 0 0 calc(100% - 20px); /* 小屏幕每行1个 */
      }
      
      .image-container {
        height: 250px;
      }
    }
  </style>

</head>



<body>

<div class="content-wrapper">
    <!-- 头部 导航栏 -->
    <div class="content-header">
      <div class="content-header-left mb-2">

        <h3 class="content-header-title mb-0">商品列表</h3>
      </div>
      <div>
        <div class="cart-button-container">
          <button type="button" class="btn btn-primary" onclick="showCart()">
            购物车 <span class="badge badge-light" id="num">0</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 左右边栏 -->
    <div class="row">
      <div class="col-sm-3">
        <div class="card">
          <div  class="list-group list-group-flush" id="suppliers">
            <!-- 供应商列表 -->
          </div>
        </div>
      </div>
      <div class="col-sm-9">

        <div class="card">

          <div class="card-content">

            <div class="card-body">

              <div class="searchbox">

                <form class="form-inline">

                  <div class="form-group">

                    <input type="text" class="form-control" placeholder="请填写商品名称" id="productNameVal" />
                  </div>
                  <div class="form-group">
                    <button type="button" class="btn btn-primary" id="productNameSearch">
                      查询
                    </button>
                  </div>
                </form>
              </div>
              <div class="card-group" id="cards">
                <!--填充内容-->

            </div>

          </div>

        </div>

      </div>

    </div>

    </div>

  </div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 

</body>



</html>
<script type="module">
    import { saveToCart, getCartCount } from "./date/js/cart.js";
    let productQuery={
        pageNum:1,
        pageSize:3,
        productName:'',
        categoryId:'-1',
        supplierId:'-1'
    }
    let baseUrl = 'http://127.0.0.1:25080';
    let totalPages = 0;
    $(function() { 
        //获取供应商列表
        getsupplierList();
        //获取商品列表
        getProductList(productQuery);
        let count = getCartCount();
        $("#num").text(count);
        
        // 绑定查询按钮事件
        $('#productNameSearch').on('click', function() {
            // 获取搜索关键字
            productQuery.productName = $('#productNameVal').val();
            // 重置页码
            productQuery.pageNum = 1;
            // 清空并重新加载商品列表
            $('#cards').empty();
            getProductList(productQuery);
        });
        
        // 绑定回车键搜索事件
        $('#productNameVal').on('keypress', function(e) {
            if (e.which === 13) { // 回车键
                $('#productNameSearch').click();
            }
        });
        
    })

   //获取供应商列表
   function getsupplierList(){
       $.ajax({
         url:baseUrl+'/suppliers/list',
         type:'post',
         data:{
           pageNum:0,
         },
         dataType:'json',
         success:function(result){
           console.log('获取供应商列表',result);
           $("#suppliers").empty();
           //请选择
           $("#suppliers").append('<a href="javascript:void(0)" class="list-group-item list-group-item-action" data-supplier-id="-1">请选择供应商</a>');
            if(result.status){
                result.data.list.forEach(function(item){
                $("#suppliers").append('<a href="javascript:void(0)" class="list-group-item list-group-item-action" data-supplier-id="'+item.supplierId+'">'+item.supplierName+'</a>');
                })
            } 
            // 为每个供应商添加点击事件
            bindSupplierClickEvents();
          }
        })
    }
    
    // 为供应商列表项绑定点击事件
    function bindSupplierClickEvents() {
        $('#suppliers .list-group-item').on('click', function() {
            // 移除所有项的active类
            $('#suppliers .list-group-item').removeClass('active');
            // 为当前点击项添加active类
            $(this).addClass('active');
            
            // 获取供应商ID
            const supplierId = $(this).data('supplier-id');
            
            // 更新查询条件
            productQuery.supplierId = supplierId;
            // 重置页码
            productQuery.pageNum = 1;
            
            // 清空商品列表并重新加载第一页商品
            $('#cards').empty();
            getProductList(productQuery);
        });
    }
        
    //获取商品列表
    async function getProductList(productQuery){ 
        $.ajax({
          url:baseUrl+'/products/page',
          type:'post',
          data:productQuery,
          dataType:'json',
          success:function(result){
            console.log('获取商品列表',result);
            if(result.status){
                totalPages = result.data.pages;
                // 只有在第一页时才清空列表，滚动加载时不清空
                if (productQuery.pageNum === 1) {
                    $('#cards').empty();
                }
                
                result.data.list.forEach(function(product){ 
                   let card = `
                        <div class="card">
                            <div class="image-container">
                                <img 
                                    class="card-img-top" 
                                    src="http://localhost:25080/`+ product.imageUrl + `" 
                                    alt="`+ product.productName + `" 
                                    onerror="this.src='app-assets/images/avatar.jpg'">
                            </div>
                            <div class="card-body">
                                <h5 class="card-title" title="`+ product.productName + `">商品名称：`+ product.productName + `</h5>
                                <p class="card-text">采购价格：<strong class="text-primary">¥`+ product.purchasePrice + `</strong></p>
                                <p class="card-text">类别：`+ product.categoryName + `</p>
                                <p class="card-text">供应商：`+ product.supplierName + `</p>
                            </div>
                            <div class="card-footer">
                            <button type="button" class="btn btn-primary cart add-to-cart-btn btn-block" data-product='`+ JSON.stringify(product).replace(/'/g, "&#39;") + `'>加入购物车</button>
                            </div>
                        </div>`;
                        $('#cards').append(card);
                });
                
                // 为新添加的"加入购物车"按钮绑定事件
                bindAddToCartEvents();
            }
          }
        })
    }
    // 添加商品到购物车
    window.saveCart = function(product) {
        console.log('添加商品到购物车',product);
        saveToCart(product);
        let count = getCartCount();
        $("#num").text(count);
    }

    //展示购物车

  window['showCart'] = function () {

    location.href = '购物车.html'

  }

 //鼠标滑轮监控
  $(document).on("mousewheel DOMMouseScroll", function (event) {
    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie

      (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));              // firefox 
    if (delta < 0) {
        // 向下滚
        console.log("down+++++");
        // 获取当前页码
        let pageNum = productQuery.pageNum;
        console.log('当前页码',pageNum);
        console.log('总页数',totalPages);
      if (pageNum < totalPages) {
            productQuery.pageNum++;
            console.log("获取后台第" + productQuery.pageNum + "数据");
            getProductList(productQuery);   
      } else {
        console.log("已是最后一页");
      }

    }

  });
  
  // 为"加入购物车"按钮绑定事件
    function bindAddToCartEvents() {
        $('.add-to-cart-btn').off('click').on('click', function() {
            // 获取商品信息
            const productData = $(this).data('product');
            // 调用保存购物车函数
            saveToCart(productData);
            // 更新购物车数量显示
            let count = getCartCount();
            $("#num").text(count);
        });
    }
</script>